<!DOCTYPE html>
<html>
<head>
<style>
	.svg-wrapper {
  height: 60px;
	margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.shape {
  fill: transparent;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -475;
  stroke-width: 8px;
  stroke: #19f6e8;
}

.text {
  color: #EEA9B8;
  font-family: 'Roboto Condensed';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position:absolute;
  top: -28px;
  left:110px;
  text-align: center;
}
.text1 {
  color: #EEA9B8;
  font-family: 'Roboto Condensed';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position:absolute;
  left:60px;
  top: -100px;
  text-align: center;}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -475;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.8s draw linear forwards;
  animation: 0.8s draw linear forwards;
}
}

</style>
</head>
<body>
	<div style="width: 400px;height: 400px;">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="align-right" class="svg-inline--fa fa-align-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 100px;height: 400px;">
	<path fill="currentColor" d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z">
    </path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1100 1024" style="width: 200px;height: 400px;">
<circle cx="600" cy="450" r="400" stroke="gray" stroke-width="20" fill="none" style="opacity:0.5;"/>
<polygon points="700,70 640,250 790,130 610,130 760,250" style="fill:purple;opacity:0.5"/>
<rect x="500" y="295" rx="15" ry="15" width="300" height="70" style="fill:red;opacity:0.5;stroke:blue;stroke-width:15" />
<rect x="340" y="420" rx="15" ry="15" width="460" height="70" style="fill:orange;opacity:0.5;stroke:purple;stroke-width:15" />
 <rect x="500" y="540" rx="15" ry="15" width="300" height="70" style="fill:red;opacity:0.5;stroke:blue;stroke-width:15" />
<rect x="340" y="670" rx="15" ry="15" width="460" height="70" style="fill:orange;opacity:0.5;stroke:purple;stroke-width:15" />
</svg>
  </svg>
  	<div style="width: 400px;height: 400px;">
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="chart-bar" class="svg-inline--fa fa-chart-bar fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 100px;height: 400px;">
<path fill="currentColor" d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"></path></svg>
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="chart-bar" class="svg-inline--fa fa-chart-bar fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 200px;height: 400px;">
<rect x="200" y="200" rx="15" ry="15" width="30" height="130" style="fill:green;opacity:0.5;stroke:blue;stroke-width:0"></rect>
<rect x="270" y="200" rx="15" ry="15" width="30" height="65" style="fill:pink;opacity:0.5;stroke:blue;stroke-width:0"></rect>
<rect x="340" y="200" rx="15" ry="15" width="30" height="130" style="fill:blue;opacity:0.5;stroke:blue;stroke-width:0"></rect>
<rect x="410" y="200" rx="15" ry="15" width="30" height="70" style="fill:red;opacity:0.5;stroke:blue;stroke-width:0"></rect>
<rect x="130" y="150" rx="15" ry="15" width="30" height="210" style="fill:black;opacity:0.5;stroke:blue;stroke-width:0"></rect>
<rect x="130" y="150" rx="15" ry="15" width="370" height="30" style="fill:black;opacity:0.5;stroke:blue;stroke-width:0"></rect>
</svg></div>
	<span style="width: 400px;height: 400px;">
    <svg xmlns="http://www.w3.org/2000/svg" class="lds-microsoft" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0)">
        <circle cx="81.73413361164941" cy="74.35045716034882" fill="#e15b64" r="5" transform="rotate(50.5317 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="0s"/></circle>
<circle cx="74.35045716034882" cy="81.73413361164941" fill="#f47e60" r="5" transform="rotate(69.1246 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.0625s"/></circle>
<circle cx="65.3073372946036" cy="86.95518130045147" fill="#f8b26a" r="5" transform="rotate(91.1457 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.125s"/></circle>
<circle cx="55.22104768880207" cy="89.65779445495241" fill="#abbd81" r="5" transform="rotate(116.408 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.1875s"/></circle>
<circle cx="44.77895231119793" cy="89.65779445495241" fill="#849b87" r="5" transform="rotate(144.337 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.25s"/></circle>
<circle cx="34.692662705396415" cy="86.95518130045147" fill="#e15b64" r="5" transform="rotate(173.917 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.3125s"/></circle>
<circle cx="25.649542839651176" cy="81.73413361164941" fill="#f47e60" r="5" transform="rotate(203.791 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.375s"/></circle>
<circle cx="18.2658663883506" cy="74.35045716034884" fill="#f8b26a" r="5" transform="rotate(232.536 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.4375s"/></circle>
<animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;0 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s"/>
</g>
</svg>
</span>
<span style="width: 500px;height: 500px;">
    <svg xmlns="http://www.w3.org/2000/svg" class="lds-microsoft" width="500px" height="500px" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid"><g transform="rotate(0)">
<circle cx="81.73413361164941" cy="74.35045716034882" fill="skyblue" r="5" transform="rotate(50.5317 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="0s"/></circle>
<circle cx="74.35045716034882" cy="81.73413361164941" fill="greenyellwo" r="5" transform="rotate(69.1246 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.0625s"/></circle>
<circle cx="65.3073372946036" cy="86.95518130045147" fill="cyan" r="5" transform="rotate(91.1457 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.125s"/></circle>
<circle cx="55.22104768880207" cy="89.65779445495241" fill="coral" r="5" transform="rotate(116.408 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.1875s"/></circle>
<circle cx="44.77895231119793" cy="89.65779445495241" fill="navy" r="5" transform="rotate(144.337 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.25s"/></circle>
<circle cx="34.692662705396415" cy="86.95518130045147" fill="darkvviolet" r="5" transform="rotate(173.917 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.3125s"/></circle>
<circle cx="25.649542839651176" cy="81.73413361164941" fill="salmon" r="5" transform="rotate(203.791 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.375s"/></circle>
<circle cx="18.2658663883506" cy="74.35045716034884" fill="seagreen" r="5" transform="rotate(232.536 50 50)">
  <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;360 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.4375s"/></circle>
<animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 0 0;0 500 500" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s"/>
    </g>
</svg>
</span>
<div style="width: 100px;height: 400px;">
	<div1 class="svg-wrapper">
  <svg  height="60" width="320" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="320" />
  </svg>
   <div class="text">HOVER</div>
</div>

<br>
<br>

<br>
<br>
<div2 class="svg-wrapper">
<svg style="width: 200px;height: 200px;" xmlns="http://www.w3.org/2000/svg">   
  	   <circle cx="100" cy="100" r="100"  fill="none" class="shape"  />
  	</svg>
  	 <div class="text1">FINE</div>
</div2>
</body>
</html>